<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text-success{
            color: blue;
        }
    </style>
</head>

<body>

    <fieldset>
        <legend>localStorage</legend>
        请输入姓名：
        <input type="text" id="name">
        <button onclick="save()">保存</button>
        <button onclick="getInfo()">获取信息</button>
    </fieldset>

    <fieldset>
        <legend>sessionStorage</legend>
        <div id="ganfan">你已经吃了0碗饭</div>
        <button onclick="ganfan()">我能去你家吃一碗饭吗？</button>
    </fieldset>


    <script>
        function save() {
            var myName = document.getElementById("name").value;
            // localStorage 特点：没有过期时间（without any expiration date），关闭浏览器时，数据不会被删除
            if (typeof (Storage) !== "undefined") {
                // 键值对 key-value 的形式保存数据
                localStorage.name = myName;

            }
        }
        function getInfo() {
            if (typeof (Storage) !== "undefined") {
                var name = localStorage.name;
                alert(name);
            }

        }

        function ganfan() {
            if (typeof (Storage) !== "undefined") {
                // sessionStorage 特点：只在当前会话（session）有效，关掉浏览器之后，数据会被清除
                if (sessionStorage.count) {
                    sessionStorage.count++;
                } else {
                    sessionStorage.count = 1;
                }
                document.getElementById("ganfan").innerHTML = 
                "你已经吃了" + sessionStorage.count + "碗饭！";
            }

        }


    </script>
</body>

</html>